<template>
  <div>
    <el-card
      class="dashboard-card app-list"
      :body-style="{ padding: '0 10px 16px' }"
      shadow="hover"
    >
      <div slot="header">
        <span class="app-list-title">{{ $t("layout.appList") }}</span>
      </div>
      <div class="list-box">
        <template v-for="(app, index) in appData">
          <div :key="app.appName" v-permission="app.permissionArray" :class="{'hidden': index > 10 && isHidden }" class="quick-link">
            <div style="cursor: pointer;" @click="app.clickHandle">
              <div class="icon">
                <el-badge class="item">
                  <div style="width: 32px;height: 32px;">
                    <img style="width: 100%;height: 100%;" :src="app.srcImg">
                  </div>
                </el-badge>
              </div>
              <el-tooltip v-if="app.appName.length > 6" class="item" effect="dark" :content="app.appName" placement="bottom">
                <div class="content">{{ app.appName }}</div>
              </el-tooltip>
              <div v-else class="content">{{ app.appName }}</div>
            </div>
          </div>
        </template>
      </div>
      <div class="show-more" @click="showMore">
        <span style="cursor: pointer;">{{ isHidden ? $t('buttons.viewMore') : $t('buttons.retract') }}</span>
      </div>
    </el-card>
  </div>
</template>

<script>
import { service as request, globals } from '@/utils/request'
import Cookies from 'js-cookie'

export default {
  name: 'AppList',
  data() {
    return {
      appData: [
        // 企业管理
        {
          permissionArray: ['per:company'],
          clickHandle: this.toCompanyConfig,
          srcImg: require('@/assets/tubiao01.png'),
          appName: this.$t('layout.enterprise')
        },
        // 商城管理
        {
          permissionArray: ['per:mall'],
          clickHandle: this.toMallManager,
          srcImg: require('@/assets/tubiao02.png'),
          appName: this.$t('layout.mallmanager')
        },
        // 询报价
        {
          permissionArray: ['per:enquiry'],
          clickHandle: this.ifq,
          srcImg: require('@/assets/tubiao03.png'),
          appName: this.$t('layout.advisory')
        },
        // 工作流
        {
          permissionArray: ['per:workflow'],
          clickHandle: this.toWorkflow,
          srcImg: require('@/assets/tubiao04.png'),
          appName: this.$t('layout.workflow')
        },
        // 报表
        {
          permissionArray: ['per:reportForm'],
          clickHandle: this.toReport,
          srcImg: require('@/assets/tubiao05.png'),
          appName: this.$t('layout.charts')
        },
        // 库存
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toStock,
          srcImg: require('@/assets/tubiao10.png'),
          appName: this.$t('layout.stock')
        },
        // 场景化采购
        {
          permissionArray: ['per:shortcut:purchase'],
          clickHandle: this.toPurchase,
          srcImg: require('@/assets/tubiao06.png'),
          appName: this.$t('shopping.Scenariobasedpurchasing')
        },
        // 招投标
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toBid,
          srcImg: require('@/assets/tubiao01.png'),
          appName: this.$t('layout.bid')
        },
        // 商旅
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toTrade,
          srcImg: require('@/assets/tubiao06.png'),
          appName: this.$t('layout.trade')
        },
        // 客服中心
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toCustomer,
          srcImg: require('@/assets/tubiao04.png'),
          appName: this.$t('layout.customerService')
        },
        // 智慧后勤
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toLogistics,
          srcImg: require('@/assets/tubiao04.png'),
          appName: this.$t('layout.Intelligentlogistics')
        },
        // 智慧市场
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toSmart,
          srcImg: require('@/assets/tubiao05.png'),
          appName: this.$t('layout.smartMarket')
        },
        // 风险管理
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toRiskc,
          srcImg: require('@/assets/tubiao06.png'),
          appName: this.$t('layout.riskcontrolmanagement')
        },
        // 智慧文库
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toLibrary,
          srcImg: require('@/assets/tubiao07.png'),
          appName: this.$t('layout.smartLibrary')
        },
        // 智慧行政
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toAdmini,
          srcImg: require('@/assets/tubiao08.png'),
          appName: this.$t('layout.smartAdministration')
        },
        // 电子谈判室
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toElectron,
          srcImg: require('@/assets/tubiao09.png'),
          appName: this.$t('layout.electronicRoom')
        },
        // 数据分析
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toAnalysis,
          srcImg: require('@/assets/tubiao10.png'),
          appName: this.$t('layout.dataanalysis')
        },
        // 积分商城
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toPoint,
          srcImg: require('@/assets/tubiao01.png'),
          appName: this.$t('layout.pointsMall')
        },
        // 体检商城
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toPhysical,
          srcImg: require('@/assets/tubiao02.png'),
          appName: this.$t('layout.physicalMall')
        },
        // 分销商城
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toDistri,
          srcImg: require('@/assets/tubiao03.png'),
          appName: this.$t('layout.distribution')
        },
        // 跨境电商商城
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toCross,
          srcImg: require('@/assets/tubiao04.png'),
          appName: this.$t('layout.Crossborder')
        },
        // 福利商城
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toWelf,
          srcImg: require('@/assets/tubiao05.png'),
          appName: this.$t('layout.welfareMall')
        },
        // 生鲜商城
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toFresh,
          srcImg: require('@/assets/tubiao06.png'),
          appName: this.$t('layout.freshfoodMall')
        },
        // 企业商旅
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toCorporat,
          srcImg: require('@/assets/tubiao07.png'),
          appName: this.$t('layout.corporatrbusinessTravel')
        },
        // 物资利旧处置平台
        {
          permissionArray: ['per:stock'],
          clickHandle: this.toReuse,
          srcImg: require('@/assets/tubiao08.png'),
          appName: this.$t('layout.reusedisposalmaterials')
        }
      ],
      isHidden: true
    }
  },
  methods: {
    showMore() {
      this.isHidden = !this.isHidden
    },
    toCompanyConfig() {
      window.open(globals.companyConfigPlateformUrl)
    },
    toMallManager() {
      const sub = localStorage.getItem('subType')
      const path = globals.mallManagerPlateformUrl + '?subType=' + sub
      window.open(path, '_blank')
    },
    ifq() {
      window.open(globals.ifqPlateformUrl)
    },
    toWorkflow() {
      if (!globals.workflowUrl.includes('/newFlow')) {
        window.open(globals.workflowPlateformUrl)
      } else {
        // 跳转若依工作流
        // 获取若依token
        request({
          url: globals.workflowUrl + 'login',
          method: 'post'
        }).then(res => {
          if (res.token) {
            // 设置若依token，单点登录
            const TokenKey = 'Admin-Token'
            Cookies.set(TokenKey, res.token)
            // 跳转若依
            window.open(globals.workflowPlateformUrl)
          }
        })
      }
    },
    toReport() {
      window.open(globals.reportPlateformUrl)
    },
    toStock() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
      // window.open("http://123.138.37.37:31040/#/login?redirect=%2Fdashboard")
      //   window.open(globals.stockPlateformUrl);
    },
    toPurchase() {
      window.open(globals.mallPlateformUrl + '#/purchase', '_blank')
    },
    toBid() {
      window.open(globals.worktid)
    },
    toTrade() {
      window.open(globals.worktrade)
    },
    toCustomer() {
      request({
        url: globals.userCenter + 'goto/customer/service?type=sub',
        method: 'get'
      }).then(res => {
        const newStr = res.replace('redirect:', '')
        window.open(newStr, '_blank')
      })
    },
    toLogistics() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toReuse() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toSmart() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toRiskc() {
      window.open(globals.pneumatic, '_blank')
    },
    toLibrary() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toAdmini() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toElectron() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toAnalysis() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toPoint() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toPhysical() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toDistri() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toCross() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toWelf() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toFresh() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    },
    toCorporat() {
      const routeData = this.$router.resolve({
        path: '/approval/newmorePages'
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-list {
  margin-bottom: 20px;
  width: 960px;
  margin-left: 13px;
  border-radius: 10px;

  .app-list-title {
    font-family: SourceHanSansCN-Bold;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 700;
  }

  .list-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .quick-link {
      width: 10%;
      height: 75px;
      text-align: center;
      padding: 10px;

      .icon {
        text-align: center;
      }

      .content {
        width: 100%;
        color: #222222;
        font-size: 12px;
        margin-top: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .show-more {
    margin: 10px 0 0 12px;
    font-size: 12px;
    color: #999;
  }
}

.quick-link .icon>img {
  width: 32px;
  height: 32px;
}

.hidden {
  display: none;
}
</style>
